<template>
    <div class="p-2">
        <searchrevealing>
            <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="98px">
                <el-form-item label="供应商名称" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item label="供应商别名" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item label="对接群名" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item label="创建时间" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item label="供应商类型" prop="supplierType">
                    <el-select style="width: 220px" v-model="queryParams.supplierType" placeholder="请选择" filterable
                        clearable>
                        <el-option v-for="dict in hm_supplier_type" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门类型" prop="supplierType">
                    <el-select style="width: 220px" v-model="queryParams.supplierType" placeholder="请选择" filterable
                        clearable>
                        <el-option v-for="dict in hm_supplier_type" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="部门名称" prop="supplierType">
                    <el-select style="width: 220px" v-model="queryParams.supplierType" placeholder="请选择" filterable
                        clearable>
                        <el-option v-for="dict in hm_supplier_type" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="人员名称" prop="supplierType">
                    <el-select style="width: 220px" v-model="queryParams.supplierType" placeholder="请选择" filterable
                        clearable>
                        <el-option v-for="dict in hm_supplier_type" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="supplierName">
                    <el-input style="width: 220px" v-model="queryParams.supplierName" placeholder="请输入供应商名称"
                        maxlength="20" @keyup.enter="handleQuery"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery" :loading="queryLoading">查询</el-button>
                    <el-button @click="resetQuery" :loading="queryLoading">重置</el-button>
                </el-form-item>
            </el-form>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-radio-group v-model="radioValue" @change="radioChange">
                            <el-radio-button label="总重复维度" value="CFWD" />
                            <el-radio-button label="主体公司" value="ZTGS" />
                            <el-radio-button label="店铺主体" value="DPZT" />
                            <el-radio-button label="店铺ID" value="DPID" />
                            <el-radio-button label="店铺名称" value="DPMC" />
                        </el-radio-group>
                    </el-col>
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"
                        :name="radioValue === 'CFWD' ? '总重复维度列表' : radioValue === 'ZTGS' ? '主体公司列表' : radioValue === 'DPZT' ? '店铺主体列表' : radioValue === 'DPID' ? '店铺ID列表' : '店铺名称列表'"
                        @updateColumn="getColmun"></right-toolbar>
                </el-row>
            </template>
            <el-table v-loading="loading" :data="contractList" border @header-dragend="dragEnd">
                <el-table-column v-for="(item, index) in supplierColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <span v-if="item.prop == 'recruiterDepts'">
                            {{ handleExtraData(scope.row.extraData, 'recruiterDeptName') }}
                        </span>
                        <span v-if="item.prop == 'recruiters'">
                            {{ handleExtraData(scope.row.extraData, 'recruiterName') }}
                        </span>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
    </div>
</template>

<script setup name="Contract" lang="ts">
import { ContractQueryParams, ContractTable } from '@/api/group/contract/types'
import { getDeptList } from '@/api/group/qualityControl'
import { listHmContract } from '@/api/system/hmContract';
import { getDicts } from '@/api/system/dict/data/index'
const { proxy } = getCurrentInstance() as any;
const supplierColumns = ref()
const columnData = ref()

const queryFormRef = ref<ElFormInstance>();
const showSearch = ref(true);
const loading = ref(true);
const total = ref(0);
const contractList = ref<ContractTable[]>([]);
const deptList = ref<{ deptId: string; deptName: string; }[]>([])

const hm_supplier_type = ref()
const queryLoading = ref(false)
const radioValue = ref('CFWD')


const queryParams = reactive<ContractQueryParams>({
    pageNum: 1,
    pageSize: 10,
    supplierName: undefined,
    recruiterDept: undefined,
    recruiter: undefined,
    sellStatus: undefined,
    supplierType: undefined,
})

/** 根据合同类型获取合同名称 */
const contractNameByType = async (type: string, row: any) => {
    if (row) {
        const rows = row.filter((item: any) =>
            item.contractType == type
        )
        if (rows.length > 0) {
            return rows[0].fileName
        } else {
            return ''
        }
    } else {
        return ''
    }
}

/**
 * 获取招商部门信息
 */
const getDeptLists = async () => {
    const res = await getDeptList({ parentId: '1782395704411734018' })
    deptList.value = res.data
}
/** 获取供应商类型字典 */
const getDictsList = async () => {
    const res = await getDicts('hm_supplier_type')
    hm_supplier_type.value = res.data
}

/** 搜索按钮操作 */
const handleQuery = () => {
    queryLoading.value = true
    queryParams.pageNum = 1;
    getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};


/** 招商部招商员多个回显 */
const handleExtraData = (data: any, recruiterDeptName: string) => {
    if (data) {
        const list: any[] = [];
        data.forEach((element: any) => {
            list.push(element[recruiterDeptName]);
        });
        return list.join(",");
    }
};

/** 合同列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await listHmContract(queryParams);
        const updatedRows = await Promise.all(res.rows.map(async (row: ContractTable) => {
            // 为每个合同类型调用contractNameByType并获取合同名称  
            const contractSellName = await contractNameByType('供销合同', row.contractList);
            const contractDiscountName = await contractNameByType('破价合同', row.contractList);
            const marginName = await contractNameByType('保证金协议', row.contractList);
            const supplementary = await contractNameByType('补充协议', row.contractList);
            const packageStatus = await contractNameByType('包销合同', row.contractList);
            row.contractSellName = contractSellName;
            row.contractDiscountName = contractDiscountName;
            row.marginName = marginName;
            row.supplementary = supplementary;
            row.packageStatus = packageStatus;
            return row;
        }));
        contractList.value = updatedRows;

        // contractList.value = res.rows;
        total.value = res.total;
        loading.value = false;
        queryLoading.value = false
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.pageSize)
    getColmun()
}
/** 获取colmun */
const getColmun = async () => {
    let columnDatas = null
    if (radioValue.value === 'CFWD') {
        columnDatas = await proxy?.useColumn('总重复维度列表')
    } else if (radioValue.value === 'ZTGS') {
        columnDatas = await proxy?.useColumn('主体公司列表')
    } else if (radioValue.value === 'DPZT') {
        columnDatas = await proxy?.useColumn('店铺主体列表')
    } else if (radioValue.value === 'DPID') {
        columnDatas = await proxy?.useColumn('店铺ID列表')
    } else if (radioValue.value === 'DPMC') {
        columnDatas = await proxy?.useColumn('店铺名称列表')
    }
    supplierColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.pageSize = columnDatas.columnPageSize || 10
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.pageSize)
}
const radioChange = async (e: string) => {
    await getColmun();
}
onMounted(async () => {
    queryParams.pageNum = 1;
    await getColmun();
    await getList();
    getDictsList();
    getDeptLists();
});
</script>
<style lang="scss" scoped>
.operation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.el-dropdown {
    font-size: 14px !important;
}
</style>